<template>
	<view class="songlist">
		<view class="title">
			推荐歌曲
		</view>
		<view class="song-list">
			<view class="list-li" v-for="(item,index) in songList" :key="index" @tap="goRankDetail(item.id,item.playCount)">
				<view class="img">
					<image class="img-li" :src="item.song.album.blurPicUrl" lazy-load="true"></image>
					<view class="gradients"></view>
					<!-- <view class="play-count">
						<text class="iconfont icon-tubiaozhizuomobanyihuifu-"></text>
						{{ formatPlayCount(item.playCount) }}
					</view> -->
				</view>
				<view class="des">
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {
			
		},
		props: ['recommendList','songList'],
		data(){
			return{
				songlist:[]
			}
		},
		onLoad() {
			this.getsongList()
		},
		methods:{
			getsongList(){
				/* uni.request({
					url:'http://47.100.48.11:4000/personalized',
					success:(res)=>{
						if(res.data.code == 200){
							console.log(res.data)
							this.songlist = res.data.result.splice(0,9)//取9个
						}
					}
				}) */
			},
			formatPlayCount(count){
				if( count > 10000){
					return Math.floor(count/10000) + '万'
				}
				return count
			},
			goRankDetail(id){
				uni.navigateTo({//页面跳转
					url: `/pages/rank/rankDetail?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.songlist{
		width: 100%;
		.title{
			height: 90upx;
			width: 100%;
			font-size: 28upx;
			color: #2e3030;
			padding-left: 1.5%;
			text-align: left;
			font-weight: 700;
			line-height: 90upx;
		}
		.song-list{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			.list-li{
				width: 33.3%;
				padding: 0 1%;
				box-sizing: border-box;
				overflow: hidden;
				margin-bottom: 10upx;
				.img{
					width: 100%;
					border-radius: 14upx;
					position: relative;
					height: 230upx;
					overflow: hidden;
					.gradients{
						position: absolute;
						border-radius: 14upx;
						background: linear-gradient(hsla(0,0%,43.1%,.4),hsla(0,0%,100%,0));
						width: 100%;
						height: 90upx;
						top: 0;
					}
					.play-count{
						position: absolute;
						right: 0;
						top: 0;
						font-size: 24upx;
						color: #f1f1ff;
						padding-right: 4upx;
						.iconfont{
							font-size: 24upx;
							margin-right: 6upx;
						}
					}
					.img-li{
						border-radius: 14upx;
						width: 100%;
						height: 100%;
					}
				}
				.des{//让盒子内容根据给定的行数超出省略...
					font-size: 25upx;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
			}
		}
	}
</style>
